import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'
import countAction from '../../store/module/count/action.js'

class CountReduxThunk extends Component {
    render () {
        return (
            <Fragment>
                <button onClick={this.props.reduce}>-</button>
                <span>{this.props.count}</span>
                <button onClick={this.props.add}>+</button>
            </Fragment>
        )
    }
}

const MapStateToProps = (state) => {
    return {
        count: state.counter.count
    }
}

const MapActionToProps = (dispatch) => {
    return {
        add: function () {
            dispatch(countAction.add)
        },
        reduce: function () {
            dispatch(countAction.reduce)
        }
    }
}

export default connect(MapStateToProps, MapActionToProps)(CountReduxThunk)
